<template>
  <div class="goods">
    <goods-list-item v-for="(item,index) in goods.list" @click="goDetail(item.id)" :product="item" :key="index">
    </goods-list-item>
    
   </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import GoodsListItem from './GoodsListItem.vue'
import { useRouter } from 'vue-router'

export default {
    components: {
        GoodsListItem
    },
    props:{
        goods:{
            type:Array,
            default(){
                return []
            }
        }
    },
    setup () {
        const state = reactive({
            count: 0
        })
        const router =useRouter()
        const goDetail = (id) => {
            router.push({path:'/detail',query:{id}})
        }
        return {
            ...toRefs(state),
            goDetail
        }
    }
}
</script>

<style lang="scss" scoped>
.goods{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5px;
}
</style>